<template>
    <div >
        
        <el-form :model="ruleForm" ref="ruleForm"  :rules = "rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
          
            <div class="container" style="margin-top:20px;">
                <h3>客户信息</h3>
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="客户名称：" prop="clientName">
                        <el-input placeholder="请输入内容" v-model="ruleForm.clientName" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="所在地区：" prop="area">
                            <el-cascader size="large" :options="options" style="width:300px" v-model="ruleForm.area" @change="handleChange"></el-cascader>
                        </el-form-item>
                        <el-form-item label="结算方式：" prop="settleType">
                            <el-select v-model="ruleForm.settleType" placeholder="请选择" style="width:300px">
                                <el-option
                                v-for="item in settleTypelist"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="客户级别：" prop="level">
                            <el-select v-model="ruleForm.level" placeholder="请选择" style="width:300px">
                                <el-option
                                v-for="item in clientlevel"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收货地址：" prop="address">
                        <el-input placeholder="请输入内容" v-model="ruleForm.address" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="对接人：" prop="meetPeople">
                        <el-input placeholder="请输入内容" v-model="ruleForm.meetPeople" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="备注：">  
                        <textarea name="" id="" cols="40" rows="5" v-model="ruleForm.remark"></textarea>
                    </el-form-item>
                </el-row>
            </div>
            <div class="container" style="margin-top:20px;">
                <h3>联系人信息</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="userName">
                        <el-input placeholder="请输入内容" v-model="ruleForm.userName" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="手机号码：" prop="phone">
                            <el-input placeholder="请输入内容" v-model="ruleForm.phone" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="邮箱：" prop="email"> 
                        <el-input placeholder="请输入内容" v-model="ruleForm.email" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="职位：" prop="position">
                        <el-input placeholder="请输入内容" v-model="ruleForm.position" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="电话号码：" prop="telephone">   
                        <el-input placeholder="请输入内容" v-model="ruleForm.telephone" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="QQ：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.qq" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
            </div>
            <div class="container" style="margin-top:20px;">
                <h3>发票信息</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发票抬头：" >
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceRise" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="电话号码：" >
                            <el-input placeholder="请输入内容" v-model="ruleForm.invoicePhone" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="开户名称："> 
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceName" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="银行账号：" > 
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceBankCode" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="纳税人识别号：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceCode" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="地址：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceAddress" style="width:300px">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="开户银行：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.invoiceBank" style="width:300px">
                            </el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
            </div>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {client_save,client_findById,client_update} from '@/request/api'
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {
        data() {
            return {
                isShow:false,
                city:'',
                area:'',
                settleTypelist:[
                    {name:'预付'},
                    {name:'现付'},
                    {name:'后付'}
                ],
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
                clientlevel:[
                    {name:'一级'},
                    {name:'二级'},
                    {name:'三级'}
                ],
                ruleForm: {
                    area:'',
                    address:'',
                    userName:'',
                    phone:''
                },
                rules:{
                    clientName: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    area: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    settleType: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    level: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    address: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    meetPeople: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    userName: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    position: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    email: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    telephone: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                }
            };
        },
        mounted(){  
            this.id = this.$route.query.id
            if(this.id == undefined){
                
            }else{
                this.init()
            }
        },
        methods: {
			
            init(){
                client_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
					this.ruleForm.area = this.ruleForm.area.split(",")	
                })
            },

            handleChange(value) {
                this.ruleForm.area = value.toString()
                var arr = ""
                for (let i = 0; i < value.length; i++) {
                    arr += CodeToText[value[i]] + "/"      
                }
                this.area = arr.substr(0,arr.length-1)
            },

            backPage () {
                this.$router.go(-1);
            },

            submitrule(formName) {
                this.$refs[formName].validate((valid)=>{
                    if(valid){
						console.log(this.ruleForm.area)
						// this.ruleForm.area = this.ruleForm.area.join(",")
                        
						if(this.id == undefined){
							
							client_save(this.ruleForm).then((res)=>{
								this.$notify({
									title: '提示',
									message: '保存成功',
									type: 'success',
									duration:1000
								});
								this.$router.push({
									path:"/client"
								})
							})  
						}else{
							client_update(this.ruleForm).then((res)=>{
								this.$notify({
									title: '提示',
									message: '修改成功',
									type: 'success',
									duration:1000
								});
								this.$router.push({
									path:"/client"
								})
							})
						}
                        
                    }else{
                        return false
                    }
                })
            },  

            
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>